<!-- 选关联择巡检规则页面 -->
<!-- 详情巡检计划--巡检规则使用 -->
<template>
  <div class="block">
    <px-table
      ref="tableRef"
      :data="tableData"
      :max-height="maxHeight ? maxHeight : '400px'"
      :height="height ? height : 'auto'"
      class="inspect-table"
      size="small"
      :border="noBorder ? false : true"
      :row-key="rowKey ? rowKey : 'id'"
      @selection-change="handleSelectionChange"
    >
      <template v-for="(item, index) in tableColumns ? tableColumns : tableColumnsDefault" :key="index">
        <px-table-column
          v-if="item.prop === 'selection'"
          :align="item.align ? item.align : 'center'"
          type="selection"
          :min-width="item.minWidth"
          :fixed="item.fixed"
        />
        <px-table-column
          v-else-if="item.prop === 'drag'"
          :align="item.align ? item.align : 'center'"
          :min-width="item.minWidth"
          :fixed="item.fixed ? item.fixed : 'left'"
        >
          <px-icon><ViewList /></px-icon>
        </px-table-column>
        <px-table-column
          v-else-if="item.prop === 'index'"
          type="index"
          :align="item.align ? item.align : 'center'"
          :min-width="item.minWidth"
          :fixed="item.fixed ? item.fixed : 'left'"
        />
        <px-table-column
          v-else-if="item.prop === 'expend'"
          :align="item.align ? item.align : 'center'"
          type="expand"
          :min-width="item.minWidth"
          :fixed="item.fixed"
        >
          <template v-slot="props">
            <template v-if="props.row['checkRuleContentList'] && props.row['checkRuleContentList'].length > 0">
              <div v-for="item in props.row['checkRuleContentList']" :key="item.id" class="p-[10px]">
                <div class="inspect-table__title">{{ item.checkItemContent }}</div>
                <InspectRulesTable
                  :total="0"
                  :tableColumns="childrenTableColumns ? childrenTableColumns : childrenTableColumnsDefault"
                  :table-data="item.checkRuleContentItemList as any[]"
                />
              </div>
            </template>
          </template>
        </px-table-column>

        <px-table-column
          v-else-if="item.prop === 'checkContentRangeName,checkContentRangeValue'"
          :label="item.label"
          :min-width="item.minWidth"
          :align="item.align ? item.align : 'left'"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :fixed="item.fixed"
        >
          <template #default="scope">{{ dealRangeVal(scope.row, item.prop) }}</template>
        </px-table-column>

        <px-table-column
          v-else-if="item.prop === 'ruleCode'"
          :label="item.label"
          :min-width="item.minWidth"
          :align="item.align ? item.align : 'left'"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :fixed="item.fixed"
        >
          <template #default="scope">
            <px-button link type="primary" @click="innerDrawerView(scope.row)">
              {{ scope.row.ruleCode }}
            </px-button>
          </template>
        </px-table-column>

        <px-table-column
          v-else-if="item.prop === 'operate'"
          :label="item.label"
          :min-width="item.minWidth"
          :align="item.align ? item.align : 'center'"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :fixed="item.fixed"
        >
          <template #default="scope">
            <px-button type="danger" link :icon="Delete" @click="itemDelete(scope.row)" />
          </template>
        </px-table-column>
        <px-table-column
          v-else
          :label="item.label"
          :min-width="item.minWidth"
          :align="item.align ? item.align : 'left'"
          :show-overflow-tooltip="item.showOverflowTooltip"
          :fixed="item.fixed"
        >
          <template v-if="item.customFun" #default="scope">{{ item.customFun(scope.row[item.prop]) }}</template>
          <template v-else #default="scope">{{
            scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-"
          }}</template>
        </px-table-column>
      </template>
    </px-table>
    <pagination
      v-if="total > 0"
      v-model:page="queryParamsInner.pageNum"
      v-model:limit="queryParamsInner.pageSize"
      class="inspection-pagination"
      :total="total"
      @pagination="queryTable"
    />
    <px-drawer v-model="innerDrawer" :append-to-body="true" size="55%" :with-header="false">
      <childrenDrawer v-if="innerDrawer" :isMain="isMain" :isView="isView" :ruleId="ruleId" type="comp" />
      <template #footer>
        <px-button @click="innerDrawer = false">关闭</px-button>
      </template>
    </px-drawer>
  </div>
</template>
<script setup lang="ts">
import { cloneDeep } from "@pureadmin/utils";
import { Delete } from "@px-ui/icons-vue";
import Sortable from "sortablejs";
import { ref, watch } from "vue";
import childrenDrawer from "../../rule/components/ViewInspecDetail.vue";
import { TableItem } from "../../types";

defineOptions({
  name: "InspectRulesTable"
});

const tableRef = ref();
const innerDrawer = ref(false);
const emits = defineEmits(["queryTable", "resetTable", "selectItems", "del", "onDrag", "queryRuleId"]);

// 计划用不到这个表格--erc规则的
const tableColumnsDefault = ref<TableItem[]>([
  { prop: "selection", minWidth: "55", fixed: "left" },
  { prop: "expend", minWidth: "55", fixed: "left" },
  { prop: "checkRuleNo", label: "规则编号", minWidth: "160", showOverflowTooltip: true, fixed: "left" },
  { prop: "checkRuleName", label: "巡检规则名称", minWidth: "160", showOverflowTooltip: true },
  { prop: "facName", label: "地块", minWidth: "160", showOverflowTooltip: true },
  { prop: "eqpTypeName", label: "设备类型", minWidth: "160", showOverflowTooltip: true }
]);
const childrenTableColumnsDefault = ref<TableItem[]>([
  { prop: "checkItem", label: "巡检项", minWidth: "60", showOverflowTooltip: true, fixed: "left" },
  { prop: "checkContent", label: "巡检内容", minWidth: "100", showOverflowTooltip: true },
  { prop: "checkContentRangeName,checkContentRangeValue", label: "内容范围", minWidth: "100", showOverflowTooltip: true }
]);
const props = defineProps<{
  tableColumns?: TableItem[];
  tableData: any[];
  childrenTableColumns?: TableItem[];
  total?: number;
  rowKey?: string;
  maxHeight?: string;
  hasDrag?: boolean;
  noBorder?: boolean;
  queryParams?: Record<string, any>;
  height?: string;
}>();
const queryParamsInner = ref({
  pageNum: 1,
  pageSize: 20
});
const isMain = ref(true);
const isView = ref(true);
const ruleId = ref("");
const innerDrawerView = row => {
  emits("queryRuleId", row.id);
  ruleId.value = row.id;
  innerDrawer.value = true;
  isMain.value = false;
  isView.value = true;
};
function queryTable() {
  emits("queryTable", cloneDeep(queryParamsInner.value));
}
function resetTable() {
  emits("resetTable");
}
watch(
  () => props.tableData,
  () => {
    if (props.hasDrag && props.tableData?.length > 0) {
      rowDrag();
    }
  },
  {
    immediate: true
  }
);
watch(
  () => props.queryParams,
  newVal => {
    if (newVal) {
      queryParamsInner.value = cloneDeep(newVal);
    }
  },
  {
    immediate: true,
    deep: true
  }
);
function dealRangeVal(row, prop) {
  const [checkContentRangeName, checkContentRangeValue] = prop.split(",");
  return `【${row[checkContentRangeName]}】   ${row[checkContentRangeValue] ? row[checkContentRangeValue] : ""}`;
}
function handleSelectionChange(val) {
  emits("selectItems", val);
}
function itemDelete(row) {
  emits("del", row);
}
// 表格行拖拽移动
const rowDrag = () => {
  const el = tableRef?.value?.$el.querySelector("tbody");
  Sortable.create(el, {
    animation: 180,
    delay: 0,
    onEnd: evt => {
      // const oldItem = props.tableData[evt.oldIndex];
      // props.tableData.splice(evt.oldIndex, 1);
      // props.tableData.splice(evt.newIndex, 0, oldItem);
      emits("onDrag", evt);
    }
  });
};
</script>
<style lang="scss" scoped>
.inspect-form {
  margin-bottom: 8px;

  :deep(.px-form-item) {
    width: 100%;
    margin-bottom: 8px;

    .px-input {
      width: 100%;
    }

    .px-select {
      width: 100%;
    }

    .px-select-v2 {
      width: 100%;
    }
  }

  :deep(.px-button + .px-button) {
    margin-left: 8px;
  }
}

.inspect-table-btn {
  display: flex;
  align-items: center;
  margin-bottom: 8px;

  :deep(.px-button + .px-button) {
    margin-left: 0;
  }
}

.inspect-table {
  --px-table-border-color: #dfdfdf;

  font-size: 14px;

  :deep(.px-table__header) {
    thead {
      tr {
        background-color: #e7eefb !important;

        th {
          font-size: 14px;
          font-weight: bold;
          color: #000;
          background-color: #e7eefb !important;
        }
      }
    }
  }

  :deep(.px-table__cell) {
    padding: 0;
    height: 36px;
    line-height: 36px;
    .cell {
      height: 36px;
      line-height: 36px;
    }
  }
  &__title {
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
    color: #000;

    &::before {
      display: inline-block;
      width: 3px;
      height: 16px;
      margin-right: 6px;
      vertical-align: middle;
      content: "";
      background: #3b82f6;
      border-radius: 0 100px 100px 0;
    }
  }
}

.inspect-table-pagination {
  position: absolute;
  right: 8px;
  bottom: 0;
}
</style>
